<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>鸿包惠</span>
      <div class="right">
      </div>
    </div>
		<div class="kong"></div> -->
    <div class="list">
			<div class="boxt">
				<div class="info">
					<span>订单号：</span><input type="text" disabled v-model="list" placeholder="VIP70112018082945512">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>现金支付：￥</span><input type="text" disabled   v-model="meney">
				</div>
			</div>
			<div class="boxt">
				<div style="line-height: auto!important;">
					<span style="color:red;font-size:11px;">说明：开通会员会扣除1912个债权鸿包，债权鸿包数量不足请在挂牌交易区交易</span>
				</div>
			</div>
			<div class="btn">
				<button class="affirm" @click="pays()">立即支付</button>
			</div>
		</div>
		<!-- 会员权限 -->
		<div class="title">
			<div class="box">
				<div class="f"></div>
				<span>VIP 会员权限</span>
				<div class="f"></div>
			</div>
		</div>
		<!-- 权限内容 -->
		<div class="center">
			<div class="lit">
				<div class="pic">
					<div class="yuan">
						<span>1</span>
					</div>
					<div class="s"></div>
				</div>
				<div class="txt">
					<span>可进入福利商城购买折扣商品</span>
				</div>
			</div>
			<div class="lit">
				<div class="pic">
					<div class="yuan">
						<span>2</span>
					</div>
					<div class="s"></div>
				</div>
				<div class="txt">
					<span>推荐奖励18消费鸿包</span>
				</div>
			</div>
			<div class="lit">
				<div class="pic">
					<div class="yuan">
						<span>3</span>
					</div>
					<div class="s"></div>
				</div>
				<div class="txt">
					<span>申请提现</span>
				</div>
			</div> 
			<div class="lit">
				<div class="pic">
					<div class="yuan">
						<span>5</span>
					</div>
					<div class="s"></div>
				</div>
				<div class="txt">
					<span>开设网店</span>
				</div>
			</div>
		</div>

        <yd-keyboard v-model="show1" :callback="done1" ref="keyboardDemo1"></yd-keyboard>

	</div>
</template>

<script>
import Vue from 'vue';
import {KeyBoard} from 'vue-ydui/dist/lib.rem/keyboard';
Vue.component(KeyBoard.name, KeyBoard);
export default {
  name: 'vip',
  data () {
    return {
		list:[],
		meney:'',
		hbs:'',
		show1:false,
		safepassword:''
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
	},
	done1(val) {
        console.log('输入的密码是：' + val);
        this.$dialog.loading.open('验证支付密码'); 
        if(val == this.safepassword){
           this.$dialog.loading.close();
           this.show1 = false
           this.zhifu()
        }else{
          this.$refs.keyboardDemo1.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
          this.$dialog.loading.close();
        }
    },
	detail:function(){
      let self = this;
	  let url = "/api/shopping/buy/vip";
		self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
			self.list = res.data; 
      })
	},
	listx(){
      let self = this;
      let url ="/api/system";
      self.httpGet(url,function(res) {
		if (res.code === 200) {
			self.meney = res.data[0].vip_price;  
        }
      })
	},
	 //获取用户资料
    details: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.user_id, token: this.token }, function(res) {
        if (res.code === 200) {
		  self.hbs = res.data.claim_price;
		  self.safepassword = res.data.safepassword
		  
        }
      });
	},
	pays(){
      let self = this;
      let url = "/api/safepwd"; 
      self.orderList=[];
			self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
				if (res.code == 200) {   
            if(res.data == 1){
              self.show1 = true
            }else{
              self.$dialog.toast({
                  mes: '请设置安全密码！',
                  timeout: 1500
              });
               setTimeout(() => {
                    self.$router.push("/ChangePassword");
                }, 1000);
            }
				}else{
        		   alert(res.msg)
				} 
      })
    },


	//立即支付
	zhifu(){
		if(parseInt(this.hbs)<1912){
          this.$dialog.toast({ mes: '债权红包不足，请在挂牌交易区交易'});
			return
		}
		 setTimeout(() => {
					window.location.href = 'http://hbh.dev.whbpkj.com/wx/pay/' + this.list;
		}, 500);
	}
  },
   created(){
    document.title="升级vip" 
    this.user_id = localStorage.getItem('myid');
    this.token = localStorage.getItem('mytoken'); 
	this.detail();
	this.listx();
	this.details()
   } 
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
	position: fixed;
}
.kong{
	width:100%;
	height:.92rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.list{
	width:100%;
	padding: 0 .3rem;
	background: #FFF;
}
.list .boxt{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	align-items: center;
	
}
.info{
	width:100%;
	height:100%;
	line-height: 1.4rem;
	border-bottom: 1px solid #eee;
}

.list .boxt .info span{
	font-size: .28rem;
	color:#707070;
}
.boxt span{
	font-size: .28rem;
	color:#333;
}
.boxt input{
	border:none;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	color: #9e9e9e; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
	color: #9e9e9e; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
	color: #9e9e9e; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	color: #9e9e9e; 
} 
.btn{
	width:100%;
	display: flex;
	justify-content: center;
	padding: .3rem 0;
}
.btn .affirm{
	width: 50%;
	height:.60rem;
	background: #23bbe1;
	border: none;
	border-radius: 5px;
	font-size: .36rem;
	color:#FFF;
}
.title{
	margin-top: .6rem;
	width:100%;
	height:1rem;
	display: flex;
	justify-content: center;
	background: #FFF;
}
.title .box{
	width:35%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.center{
	width:100%;
	padding: 0 .5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #FFF;
}
.center .lit{
	width:100%;
	display: flex;
	padding: .14rem 0;
	align-items: center;
}
.center .lit .pic{
	position: relative;
}
.center .lit .pic .yuan{
	width:.43rem;
	height:.43rem;
	border-radius: 50%;
	background: #ec6941;
	text-align: center;
	line-height: .43rem;
}
.center .lit .pic .yuan span{
	font-size: .3rem;
	color: #FFF;
}
.center .lit .pic .s{
	width:.26rem;
	height:.26rem;
	border-radius: 50%;
	background: #eea159;
	position: absolute;
	top:.15rem;
	left: .3rem;
	z-index: 999;
}
.center .lit .txt{
	margin-left: .4rem;
}
.center .lit .txt span{
	color: #707070;
	font-size: .30rem;
}
.title .box .f{
	width:.1rem;
	height:.1rem;
	background:#ee8834;
}
.title .box span{
	font-size: .30rem;
	color:#ee8834;
}
</style>



